{% extends "communityBase.html" %}
{% block tochange %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            {% for data in notes %}

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="{{ data['id1'] }}">
                        <h4 class="panel-title" style="display: inline;">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{ data['id2'] }}"
                               aria-expanded="true" aria-controls="{{ data['id2'] }}">
                                {{ data['title'] }}
                            </a>
                        </h4>
                        <h4 style="display: inline;float: right;">
                            {{ data['class'] }}
                        </h4>
                        <h4 style="display: inline;float: right;">
                            {{ data['time'] }}
                        </h4>
                    </div>
                    <div id="{{ data['id2'] }}" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="{{ data['id1'] }}">
                        <div class="panel-body">

                            <ul class="media-list">
                                <li class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" src="{{ data['avatar'] }}" alt="64x64"
                                                 style="width: 64px; height: 64px;">
                                        </a>
                                    </div>

                                    <div class="media-body">
                                        <h4 class="media-heading">{{ data['author'] }}</h4>
                                        <P> {{ data['text'] }}</P>

                                        {% for reply in data['reply'] %}
                                            <div class="media">
                                                <div class="media-left">
                                                    <a href="#">
                                                        <img class="media-object" src="{{ reply['avatar'] }}" alt="..."
                                                             style="width: 64px; height: 64px;">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">{{ reply['user'] }}</h4>
                                                    <h5 style="display: inline;float: right;"> {{ reply['time'] }}</h5>
                                                    <p>{{ reply['text'] }}<p>
                                                </div>
                                            </div>
                                        {% endfor %}

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        {#    分页,endpoint是视图函数的名字#}
        {% import 'note_index_macro.html' as index %}
        <div class="center-block">
            {{ index.render_pagination(pagination,endpoint) }}
        </div>
        <!--定义一个编辑框-->
        {% if note_form %}
            {#    发帖#}
            <form class="form-horizontal" method="post">
                {{ note_form.hidden_tag() }}
                <div class="form-group">
                    {{ note_form.title.label(for="forPostTitle",class="col-sm-1 control-label") }}
                    <div class="col-sm-5">
                        {% if note_form.title.errors %}
                            {% for e in note_form.title.errors %}
                                <p class="help-block" style="color: red">{{ e }}</p>
                            {% endfor %}
                        {% else %}
                            <br>
                        {% endif %}
                        {{ note_form.title( id="forPostTitle",class="form-control") }}
                    </div>

                    {{ note_form.opera_class.label(for="forPostClass",class="col-sm-1 control-label") }}
                    <div class="col-sm-4">
                        {% if note_form.opera_class.errors %}
                            {% for e in note_form.opera_class.errors %}
                                <p class="help-block" style="color: red">{{ e }}</p>
                            {% endfor %}
                        {% else %}
                            <br>
                        {% endif %}
                        {{ note_form.opera_class(id="forPostClass", class="form-control") }}
                    </div>
                    <div class="col-sm-1"></div>
                </div>

                <div class="form-group">
                    {{ note_form.text_area.label(class="control-label col-sm-1") }}
                    <div class="col-sm-10">
                         {% if note_form.text_area.errors %}
                            {% for e in note_form.text_area.errors %}
                                <p class="help-block" style="color: red">{{ e }}</p>
                            {% endfor %}
                        {% else %}
                            <br>
                        {% endif %}
                        {{ note_form.text_area(class="form-control",rows="5") }}
                    </div>
                    <div class="col-sm-1"></div>
                </div>

                <div class="form-group">
                    <div class="col-sm-10"></div>
                    <div class="col-sm-1">
                        {{ note_form.post(type="submit", class="btn btn-primary") }}
                    </div>
                    <div class="col-sm-1"></div>
                </div>
            </form>
        {% endif %}
    </div>

{% endblock %}
